<template>
	<view class="main-page" style="padding-bottom: 120rpx;">
		<view class="head-img-container">
			<image :src="actDetailData.shopImg" class="head-img" mode="aspectFill"></image>
			<view class="head-img-shadow"></view>
		</view>
		<view class="title-container">
			<image class="back-ic" src="../../static/ic_back_white.png" @click="goBack"></image>
			<text class="font-fff-36 font-weight-600">活动详情</text>
		</view>
		
		<view class="info-container">
			<view class="row-container-top width-100p">
				<image class="act-img" :src="actDetailData.shopImg"></image>
				<view class="column-container"
				 style="flex-grow: 1;position: relative;">
					<view class="row-container-row-between-top">
						<text class="act-name">{{actDetailData.shopName}}</text>
						<!-- <text class="font-ff4646-28 font-weight-600" style="flex-shrink: 0;">剩余{{actDetailData.surplusCount}}份</text> -->
						<text class="font-ff4646-28 font-weight-600" style="flex-shrink: 0;" v-if="actDetailData.surplusCount == 1">最后一席</text>
						<text class="font-333-28" style="flex-shrink: 0;" v-else-if="actDetailData.surplusCount == 0">全部售罄</text>
						<text class="font-333-28" style="flex-shrink: 0;" v-else-if="actDetailData.surplusCount / actDetailData.joinCount > 0.2">剩余充足</text>
						<text class="font-333-28" style="flex-shrink: 0;" v-else>即将报满</text>
					
					</view>
					
					<view class="row-container-row-between mt-8 width-100p">
						<image class="platform-ic" :src="actDetailData.brandImg" mode="heightFix"></image>
					</view>
					
					<view class="tag-box">
						<text class="single-tag">
							满{{actDetailData.fullAmount}}奖{{actDetailData.returnAmount}}
						</text>
						
						<text class="single-tag" v-if="actDetailData.checkOneDish">
							指定餐品
						</text>
						
						<text class="single-tag" v-if="actDetailData.checkComment == 0">
							{{actDetailData.favourableCommentCount}}字{{actDetailData.favourableCommentImgCount ? actDetailData.favourableCommentImgCount : '0'}}图
						</text>
						
						<text class="single-tag" v-if="actDetailData.checkComment == 1">
							无需品鉴
						</text>
						
						<text class="single-tag" v-if="actDetailData.checkWine == 1">
							酒水限定
						</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 活动流程 -->
		<view class="tips-container" style="justify-content: space-between;">
			<view class="row-container">
				<image src="../../static/ic_title_line.png" class="tips-ic"></image>
				<text class="font-333-32 font-weight-600">活动流程</text>
			</view>
			<text class="font-999-24">如有疑问请咨询客服</text>
		</view>
		<view class="step-box">
			<view class="column-container-row-center mt-10" style="position: relative;">
				<image class="step-line" src="../../static/ic_step_line.png"></image>
				<image class="step-dot" src="../../static/ic_step_yellow.png"></image>
				<image class="step-dot" src="../../static/ic_step_yellow.png" style="margin-top: 90rpx;"></image>
				<image class="step-dot" src="../../static/ic_step_yellow.png" style="margin-top: 90rpx;"></image>
			</view>
			<view class="column-container ml-24">
				<view class="column-container">
					<text class="step-title">第1步：报名</text>
					<text class="step-content">点击下方报名按钮进行报名</text>
				</view>
				<view class="column-container mt-28">
					<text class="step-title">第2步：提交订单</text>
					<text class="step-content">请在时限内提交订单，否则名额作废，无返现</text>
				</view>
				<view class="column-container mt-28">
					<text class="step-title">第3步：领取返现并提现</text>
					<text class="step-content">提交订单后，审核通过后，请及时提现</text>
				</view>
			</view>
		</view>
		
		<!-- 品鉴规则 -->
		<view class="tips-container">
			<image src="../../static/ic_title_line.png" class="tips-ic"></image>
			<text class="font-333-32 font-weight-600">品鉴规则</text>
		</view>
		<view class="memo-container">
			<text class="font-666-28" style="line-height: 40rpx;">1、先报名，再到{{actDetailData.brandName}}App的商家店铺下单，餐到后，拍清晰菜品照片，对菜品做出品鉴，截图回传到最星城平台（无需评价活动则无需品鉴）；</text>
			<text class="font-666-28" style="line-height: 40rpx;">{{showFullHint ? fullHint : shotHint}}</text>
			<view class="row-container-center width-100p mt-24">
				<view class="hide-btn" v-if="showFullHint" @click="changeHintShow">
					<text class="font-666-26">收起</text>
					<image src="../../static/ic_arrow_up_grey.png" class="arrow"></image>
				</view>
				<view class="hide-btn" v-if="!showFullHint" @click="changeHintShow">
					<text class="font-666-26">展开</text>
					<image src="../../static/ic_arrow_down_grey.png" class="arrow"></image>
				</view>
			</view>
		</view>
		
		<view class="tips-container">
			<image src="../../static/ic_title_line.png" class="tips-ic"></image>
			<text class="font-333-32 font-weight-600">加入福利群</text>
		</view>
		<view class="add-group-box" @click="clickJoinGroup">
			<view class="row-container">
				<image class="logo-ic" src="../../static/ic_logo.png"></image>
				<view class="column-container">
					<text class="font-333-32 font-weight-600">粉丝专属福利群</text>
					<text class="font-999-26 mt-4">优质霸王餐活动群内优先推送</text>
					<view class="row-container mt-10">
						<text class="font-999-26">已有</text>
						<text class="font-333-26 font-weight-600">{{joinPeopleCount}}</text>
						<text class="font-999-26">人加入</text>
					</view>
				</view>
			</view>
			<view class="add-btn">添加</view>
		</view>
		
		<view class="bottom-box">
			<view class="left-btn-box" @click="handleOpenCustomService">
				<image src="../../static/ic_msg.png" class="left-btn"></image>
				<text class="font-333-22 font-weight-600">客服</text>
			</view>
			<view class="left-btn-box" @click="gotoAsk">
				<image src="../../static/ic_question.png" class="left-btn"></image>
				<text class="font-333-22 font-weight-600">问答</text>
			</view>
			
			<!-- 分享进入 距离过远 -->
			<view class="active-box" v-if="checkFar == 1">
				<view class="full-active-btn" @click="gotoHome" >超出距离，查看其他</view>
			</view>
			
			<!-- 进行中 且剩余份数大于0 显示报名 -->
			<view class="active-box" v-if="checkFar != 1 && actDetailData.checkStatus == 1 && actDetailData.surplusCount > 0">
				<view class="active-info" v-if="checkPayOrder != 1">
					<text class="font-fff-28 font-weight-600">需支付押金 ¥0.1</text>
					<text class="font-999-20">押金随返现金额存入余额</text>
				</view>
				<view v-if="checkPayOrder != 1" class="active-btn" @click="clickShowConfirmWindow" >我要报名</view>
				<view v-else class="full-active-btn" @click="clickShowConfirmWindow" >我要报名</view>
			</view>
			
			<!-- 进行中 且剩余份数小于1 显示已售罄 -->
			<view class="active-box" v-if="checkFar != 1 &&  actDetailData.checkStatus == 1 && actDetailData.surplusCount < 1">
				<view class="active-info" style="width: 50%;">
					<text class="font-fff-28 font-weight-600">已售罄</text>
				</view>
				<view class="active-btn" style="width: 50%;" @click="gotoHome">查看更多</view>
			</view>
			
			<!-- 未开始 -->
			<text class="not-start-box" v-if="checkFar != 1 && actDetailData.checkStatus == 0">活动开始倒计时：{{leftTimeStr}}</text>
		
			<!-- 已结束 -->
			<view class="active-box" v-if="checkFar != 1 && (actDetailData.checkStatus == 2 || actDetailData.checkStatus == 3)">
				<view class="active-info" style="width: 50%;">
					<text class="font-fff-28 font-weight-600">已结束</text>
				</view>
				<view class="active-btn" style="width: 50%;" @click="gotoHome">查看更多</view>
			</view>
		
		</view>
		
		<view style="width: 100%;" v-if="showAuthWindow">
			<AuthWindow></AuthWindow>
		</view>
		
		<view v-if="showUpdateInfoWindow" class="update-info-window">
			<view class="update-info-inner-window">
				<image class="update-info-shadow-bg" src="../../static/bg_shadow_buy_window.png"></image>
				<text class="font-333-36 font-weight-600 mt-44">完善个人信息</text>
				<text class="hint-content">为了给您带来更好的服务体验，请先完善个人信息~</text>
				<view class="row-container-center mb-44">
					<text class="cancel-btn" @click="showUpdateInfoWindow = false">我再想想</text>
					<text class="ok-btn" @click="gotoUpdateInfo">去完善</text>
				</view>
			</view>
		</view>
		
		<!-- 报名确认弹窗 -->
		<view v-if="showConfirmWindow" class="update-info-window">
			<view class="update-info-inner-window">
				<image class="update-info-shadow-bg" src="../../static/bg_shadow_buy_window.png"></image>
				<text class="font-333-36 font-weight-600 mt-44">是否确认报名？</text>
				<text class="content-str">若您报名后取消订单，累计{{actDetailData.orderCount}}次，则30天内无法继续报名！</text>
				<view class="row-container-center mb-44">
					<text class="cancel-btn" @click="showConfirmWindow = false">我再想想</text>
					<text class="ok-btn" @click="clickToBuy">继续报名</text>
				</view>
			</view>
		</view>
		
		<!-- 报名失败 -->
		<view v-if="showBuyFailedWindow" class="update-info-window">
			<view class="update-info-inner-window">
				<image class="update-info-shadow-bg" src="../../static/bg_shadow_buy_window.png"></image>
				<image class="failed-ic" src="../../static/ic_buy_failed.png"></image>
				<text class="font-333-36 font-weight-600 mt-20">很抱歉，报名失败！</text>
				<text class="hint-content" style="margin-left: 0rpx;margin-right: 0rpx;">{{buyFailedMsg}}</text>
				<text class="confirm" @click="showBuyFailedWindow = false">我知道了</text>
				<view class="rule-hint-container">
					<text class="font-333-28 mb-10">温馨提示</text>
					<text class="font-ff621f-28" style="text-align: center;font-weight: 500;">请不要尝试用不同微信号继续报名，再用同一个{{actDetailData.brandName}}APP账户继续下单，一旦发现账户永封！</text>
				</view>
			</view>
		</view>
		
		<!-- 去店铺点餐弹窗 -->
		<view class="to-shop-window" v-if="showToShopWindow">
			<view class="to-shop-box">
				<image class="to-shop-shadow-bg" src="../../static/bg_shadow_buy_window.png"></image>
				<text class="font-333-36 font-weight-600">去店铺点餐</text>
				<image class="shop-code-img" :src="actDetailData.shopCodeImg" :show-menu-by-longpress="true"></image>
				<view class="row-container" style="position: relative;">
					<text class="font-333-28 font-weight-600" style="z-index: 101;">长按二维码，进入店铺点餐</text>
					<view class="line-divider"></view>
				</view>
				<text class="font-666-28" style="padding: 32rpx;" @click="showToShopWindow=false">我再想想</text>
			</view>
		</view>
		
		<orderDetailImgWindow ref="orderDetailImgWindowRef" 
		:groupImg="actDetailData.crowdImg"></orderDetailImgWindow>
		
		<fullImageWindow ref="fullImageWindowRef" ></fullImageWindow>
		
		<view class="read-hint-window" v-if="showReadHintWindow">
			<view class="read-hint-box">
				<image class="top-bg" src="../../static/bg_shadow_buy_window.png"></image>
				<text class="font-333-36 font-weight-600 mt-44">温馨提示</text>
				<text class="hint-text">
					为了获得奖励，请仔细阅读页面中“报名须知（必读）”，严格按照商家要求完成订单。
				</text>
				<text class="read-btn" @click="handleCloseReadHintWindow">我知道了</text>
				<view class="row-container-center mb-30" @click="noShowHint = !noShowHint">
					<image class="check-icon" src="../../static/ic_chosen.png" v-if="noShowHint"></image>
					<image class="check-icon" src="../../static/ic_choose_not.png" v-if="!noShowHint"></image>
					<text class="font-666-28">我已知晓，不再提示</text>
				</view>
				
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import timeUtils from '../../utils/time.js'
	import AuthWindow from '../../components/authWindow.vue'
	import orderDetailImgWindow from '../../components/orderDetailImgWindow.vue'
	import fullImageWindow from '../../components/fullImageWindow.vue'
	
	export default {
		data() {
			return {
				actId:'' , //活动id
				status:1,  // 0未支付  1已支付 
				actDetailData:{
					surplusCount:0,
					returnAmount:"0",
					fullAmount:"0",
					favourableCommentCount:"0",
					favourableCommentImgCount:'0',
					startTime:'00:00',
					endTime:'00:00',
					integral:0,
					brandName:'',
					platformAmount:0
				} , //活动详情
				tipsList:[] , // 要求的列表
				leftTimeStr:"00:00:00",
				showAuthWindow:false,
				startTimer:null,
				showUpdateInfoWindow:false , // 显示去完善信息的弹窗
				showConfirmWindow:false , //确认报名弹窗
				showBuyFailedWindow:false , //报名失败弹窗
				buyFailedMsg:"" , // 报名失败原因
				joinPeopleCount:'0' , // 加群人数
				
				orderId:'' , //创建订单时的orderId
				showToShopWindow:false , //是否显示去店铺下单的弹窗
				
				showFullHint:false , // 显示全部的品鉴规则
				shotHint:'2、下单前请核对店铺名称、详细地址，订单下错店铺，会导致您无法获得奖励(尽量用二维码进店)；\n3、在外卖平台下单，活动需满足商家要求的实付金额，可以用红包和优惠券，用完后满足实付金额即可；',
				fullHint:'2、下单前请核对店铺名称、详细地址，订单下错店铺，会导致您无法获得奖励(尽量用二维码进店)；\n3、在外卖平台下单，活动需满足商家要求的实付金额，可以用红包和优惠券，用完后满足实付金额即可；\n4、品鉴截图请于报名后4小时内提交，超时将视为自动放弃，无法获得奖励；\n 5、除饮品店、超市以外，任何店铺仅可随主食点一瓶酒水饮料；\n6、餐品或包装出现问题，请联系商家处理，申请全额退款或理赔订单请放弃名额，不可敷衍内容、图片及与餐品无关内容反馈，并且不可删除评价；\n7、本平台活动与商家品鉴卡不同享，随订单购买外卖平台会员、会员加量包、超值优惠券、准时宝等属于支付给外卖平台的费用，不计入实付金额；\n8、禁止以任何形式向商家索要红包或其他返利，一经发现，账户永封! \n9、禁止在外卖平台询问商家本平台活动，有问题联系客服，餐品问题可联系商家沟通。',
		
				showReadHintWindow:false , // 阅读提示弹窗
				noShowHint:false,
				checkPayOrder:0 , // 是否需要支付  1不需要支付
				
				longitude:'' , 
				latitude:'',
				checkFar:0 , // 是否距离过远  距离过远不可点单
				
				checkVip:0 , // 0非1是 vip
				vipTime:'' , // vip到期时间
			}
		},
		
		onPullDownRefresh() {
			this.loadActDetail()
		},
		
		onLoad(options) {
			this.loadUserDetail()
			
			if (options.actId){
				this.actId = options.actId
				this.loadActDetail()
			}
			
			if (options.inviteUserId){
				this.cookie.set("jx_inviteUserId" , options.inviteUserId)
			}
			
			if (!this.cookie.get("sp_no_show_read_hint")){
				this.showReadHintWindow = true
			}
			
			let that = this
			uni.$on("authSuccess" , ()=>{
				that.showAuthWindow = false
				that.loadActDetail()
			})
			
			uni.$on("authCancel" , ()=>{
				that.showAuthWindow = false
			})
		},
		
		onShow() {
			// this.joinPeopleCount = getApp().globalData.groupPeopleCount
		},
		
		onUnload() {
			if (this.startTimer){
				clearInterval(this.startTimer)
			}
		},
		
		components:{
			AuthWindow,
			orderDetailImgWindow,
			fullImageWindow
		},
		
		methods: {
			loadUserDetail(){
				let that = this
				this.http({
					url:"/user/userCenter",
					method:"POST",
					hideLoading:true,
					data:{},
					success(data){
						if (data.code == 200){
							that.cookie.set("jx_nickname" , data.data.nickName)
							that.cookie.set("jx_avatar" , data.data.headImg)
							that.cookie.set("jx_mobile" , data.data.mobile)
							that.checkVip = data.data.checkVip
							that.vipTime =  data.data.vipTime
						}
					},
					failed(e){
					}
				})
			},
			
			getLocation(){
				let that = this
				uni.authorize({
					scope:'scope.userLocation',
					success(authRes) {
						console.log('authorize----' + JSON.stringify(authRes))
						uni.getLocation({
							type:"gcj02",
							isHighAccuracy:'true',
							success(locationRes) {
								console.log('location--------',JSON.stringify(locationRes))
								that.longitude = locationRes.longitude
								that.latitude = locationRes.latitude
								that.cookie.set("jx_lng" , that.longitude)
								that.cookie.set("jx_lat" , that.latitude)
								
								that.loadActDetail()
							},
							fail(e) {
								console.log("location---获取经纬度失败---")
							}
						})
					},
					fail(authErr) {
					}
				})
			},
			
			loadGroupImgAndCount(){
				let that = this
				this.http({
					url:'/common/platform/img',
					method:'POST',
					hideLoading:true,
					data:{
						longitude : that.longitude,
						latitude : that.latitude
					},
					success(res){
						if (res.code == 200 && res.data){
							getApp().globalData.groupId = res.data.id
							getApp().globalData.groupPeopleCount = res.data.joinCount
							getApp().globalData.groupImg = res.data.platformImg
							getApp().globalData.address = res.data.address
							that.joinPeopleCount = res.data.joinCount
						}
					},
					failed(e){
					}
				})
			},
			
			gotoHome(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			
			goBack(){
				let pages = getCurrentPages()
				if (pages.length <= 1){
					uni.switchTab({
						url:'/pages/index/index'
					})
				} else{
					uni.navigateBack()
				}
				
			},
			
			handleCloseReadHintWindow(){
				this.showReadHintWindow = false
				if (this.noShowHint){
					this.cookie.set("sp_no_show_read_hint" , true)
				}
			},
			
			clickShowConfirmWindow(){
				if (!this.cookie.get('jx_token')){
					this.showAuthWindow = true
					return
				}
				this.showConfirmWindow = true
			},
			
			changeHintShow(){
				this.showFullHint = !this.showFullHint
			},
			
			//点击复制
			handleCopy(val ){
				let that = this
				uni.setClipboardData({
					data: val,
					success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				});
			},
			
			//点击报名  首先创建订单  然后使用orderNo下单
			clickToBuy(){
				this.showConfirmWindow = false
				
				// if(!this.cookie.get("jx_mobile")){
				// 	this.showUpdateInfoWindow = true
				// 	return
				// }
				
				let that = this
				this.http({
					url:'/user/order/createOrder',
					method:"POST",
					data:{
						activeId:that.actId,
						type:that.config.withdrawType
					},
					success(res){
						if (res.code == 200){
							that.orderId = res.data.id
							
							if (that.checkPayOrder == 1){
								uni.$emit("refreshIndex")
								uni.$emit("refreshOrderList")
								that.payDone()
							} else{
								let orderNo = res.data.orderNo
								that.commitOrder(orderNo)
							}
						} else{
							that.buyFailedMsg = res.msg
							that.showBuyFailedWindow = true
						}
						
					},
					failed(e){
						
					}
				})
			},
			
			//订单创建后  调用下单接口
			commitOrder(orderNo){
				
				uni.$emit("refreshIndex")
				uni.$emit("refreshOrderList")
				
				if (!orderNo){
					uni.showToast({
						title:"订单id为空",
						icon:'none'
					})
					return
				}
				let that = this
				this.http({
					url:'/pay/unifiedOrder',
					method:"POST",
					data:{
						outTradeNo:orderNo
					},
					header : {
						"content-type": "application/json",
						'Authorization': uni.getStorageSync("jx_token")
					},
					success(res){
						if (res.code == 200){
							that.payOrder(res.data)							
						} else{
							setTimeout(()=>{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							} , 500)
						}
						
					},
					failed(e){
						
					}
				})
				
			},
			
			//调用支付
			payOrder(payData){
				let that = this
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payData.timeStamp,
					nonceStr: payData.nonceStr,
					package: payData.package,
					signType: payData.signType,
					paySign: payData.paySign,
					success(res) {
						that.payDone()
					},
					fail(e) {
						console.log('payOrder-----' , e)
					}
				})
			},
			
			//支付完成
			payDone(){
				uni.showToast({
					title:'支付成功',
					icon:'none'
				})
				uni.$emit("refreshOrderList")
				uni.redirectTo({
					url:'/pages/order/commentOrderDetail?actId=' + this.actId + "&orderId=" + this.orderId
				})
			},
			
			//加载活动详情
			loadActDetail(){
				this.latitude = this.cookie.get('jx_lat')
				this.longitude = this.cookie.get('jx_lng')
				
				if (!this.latitude || !this.longitude){
					this.getLocation()
					return
				}
				
				this.loadGroupImgAndCount()
				
				let that = this
				this.http({
					url:'/common/active/activeDetail',
					method:'POST',
					data:{
						activeId  : that.actId,
						longitude : that.longitude,
						latitude : that.latitude
					},
					success(res){
						console.log('res---++++++----' + res.code)
						if (res.code == 200){
							that.actDetailData = res.data
							that.checkPayOrder = res.data.checkPayOrder
							
							that.cookie.set("jx_mobile" , that.actDetailData.mobile)
							
							that.tipsList = []
							if (that.actDetailData.checkApprove){
								that.tipsList.push("订单所有菜品点赞；")
							}
							if (that.actDetailData.checkCollect){
								that.tipsList.push("收藏本店；")
							}
							
							that.checkFar = res.data.checkFar
							
							// if (that.actDetailData.searchTxt){
							// 	that.tipsList.push("通过搜索“" + that.actDetailData.searchTxt + "”搜索列表进入本店")
							// }
							// that.tipsList.push("先浏览并进入其他若干店铺，再到本店下单；")
							
							if (that.actDetailData.surplusTime > 0){
								if (that.startTimer){
									clearInterval(that.startTimer)
								}
								that.startTimer = setInterval(()=>{
									if (that.actDetailData.surplusTime < 1){
										that.leftTimeStr = "00:00:00"
										that.loadActDetail()
										clearInterval(that.startTimer)
									} else{
										let leftTime = that.actDetailData.surplusTime --
										that.leftTimeStr = timeUtils.formatSeconds(leftTime)
									}
								} , 1000)
							}
						} else if (res.code == 505){
							that.showAuthWindow = true
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			//去完善信息
			gotoUpdateInfo(){
				this.showUpdateInfoWindow = false
				uni.navigateTo({
					url:'/pages/mine/profile'
				})
			},
			
			//点击加群
			clickJoinGroup(){
				this.$refs.orderDetailImgWindowRef.showGroupImg = true
			},
			
			clickShowFullImg(url){
				this.$refs.fullImageWindowRef.changeImageUrl(url)
				this.$refs.fullImageWindowRef.showFullImg = true
			},
			
			gotoAsk(){
				if (this.actDetailData && this.actDetailData.articleUrl){
					uni.navigateTo({
						url:'/pages/index/web?webUrl=' + encodeURIComponent(this.actDetailData.articleUrl)
						// url:'/pages/index/web?webUrl=https://mp.weixin.qq.com/s/sNFG3fkr18DeCHUDYPdMlQ'
					})
				}
			},
			
			//打开客服聊天
			handleOpenCustomService(){
				//https://work.weixin.qq.com/kfid/kfcba1f86f08779f062
				console.log('serviceUrl------' + this.cookie.get('customServiceUrl'))
				uni.openCustomerServiceChat({
					corpId:this.config.corpId ,
					extInfo: {url: this.cookie.get('customServiceUrl')},
					success(res){
						
					},
					fail(e){
						console.log('eeeeeeee-----' + JSON.stringify(e))
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.head-img-container{
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 330rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		
		.head-img{
			width: 100%;
			height: 330rpx;
		}
		
		.head-img-shadow{
			width: 100%;
			height: 330rpx;
			background: rgba(0, 0, 0, 0.5);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 11;
		}
	}
	
	.title-container{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 100%;
		margin-top: 100rpx;
		z-index: 40;
		
		.back-ic{
			width: 64rpx;
			height: 64rpx;
			padding: 0rpx 22rpx;
			position: absolute;
			left: 0rpx;
		}
	}
	
	
	.info-container{
		display: flex;
		flex-direction: column;
		width: calc(100% - 108rpx);
		padding: 24rpx 24rpx 14rpx 24rpx;
		background-color: white;
		margin: 30rpx;
		border: 2rpx solid #E8E8E8;
		border-radius: 16rpx;
		z-index: 30;
		
		.address-container{
			display: flex;
			flex-direction: row;
			margin-top: 25rpx;
			
			.locaiton-ic{
				width: 28rpx;
				height: 28rpx;
				flex-shrink: 0;
			}
		}
		
		.tag-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 10rpx;
			height: 40rpx;
			
			.single-tag{
				border-radius: 6rpx;
				background: #FF4646;
				margin-right: 10rpx;
				padding: 0rpx 8rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				color: white;
				font-size: 22rpx;
				font-weight: 600;
			}
			
		}
		
		.into-shop-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 442rpx;
			height: 76rpx;
			background: #FFD100;
			border-radius: 10rpx;
			margin-right: 20rpx;
			
			.shop-ic{
				width: 28rpx;
				height: 28rpx;
				margin-right: 6rpx;
			}
			
			.arrow{
				width: 16rpx;
				height: 16rpx;
				margin-left: 6rpx;
			}
		}
		
		.copy-shop{
			height: 76rpx;
			flex-grow: 1;
			line-height: 76rpx;
			color: #333333;
			font-size: 28rpx;
			background: #FFD100;
			border-radius: 10rpx;
			text-align: center;
			font-weight: 600;
		}
	}
	
	.act-name{
		margin-right: 44rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	
	.act-img{
		width: 142rpx;
		height: 142rpx;
		margin-right: 24rpx;
		border-radius: 10rpx;
		flex-shrink: 0;
	}
	
	.line{
		width: 1rpx;
		height: 22rpx;
		background-color: #999999;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
	
	.tips-container{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100% - 60rpx);
		margin-left: 30rpx;
		margin-right: 30rpx;
		
		.tips-ic{
			width: 8rpx;
			height: 34rpx;
			margin-right: 16rpx;
		}
	}
	
	
	.platform-ic{
		width: auto;
		height: 36rpx;
		margin-right: 8rpx;
	}
	
	.time-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: calc(100% - 108rpx);
		height: 78rpx;
		margin: 20rpx 30rpx 0rpx 30rpx;
		padding: 0rpx 24rpx;
		background: white;
		border-radius: 16rpx;
	}
	
	.memo-container{
		display: flex;
		flex-direction: column;
		width: calc(100% - 108rpx);
		padding: 18rpx 24rpx;
		margin: 20rpx 30rpx 30rpx 30rpx;
		background-color: white;
		border-radius: 16rpx;
		
		.hide-btn{
			width: 155rpx;
			height: 52rpx;
			background: #F5F5F5;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			
			.arrow{
				width: 18rpx;
				height: 18rpx;
				margin-left: 4rpx;
			}
		}
	}
	
	.step-box{
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		width: calc(100% - 108rpx);
		margin: 20rpx 30rpx 30rpx 30rpx;
		background: white;
		border-radius: 16rpx;
		padding: 24rpx;
		
		.step-dot{
			width: 20rpx;
			height: 20rpx;
			z-index: 20;
		}
		
		.step-line{
			width: 2rpx;
			height: 240rpx;
			position: absolute;
			top: 20rpx;
		}
		
		.step-title{
			color: #333333;
			font-size: 28rpx;
			line-height: 39rpx;
			font-weight: 600;
			margin-bottom: 8rpx;
		}
		
		.step-content{
			color: #999999;
			font-size: 24rpx;
			line-height: 34rpx;
		}
	}
	
	.buy-success-window{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 200;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.inner-window{
			display: flex;
			flex-direction: column;
			width: calc(100% - 236rpx);
			padding: 0 44rpx;
			position: relative;
			background-color: white;
			align-items: center;
			border-radius: 30rpx;
			
			.shadow-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.top-ic{
				width: 108rpx;
				height: 108rpx;
				margin-top: 50rpx;
				margin-bottom: 20rpx;
			}
			
			.code-box{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border: 1px dashed #FF621F;
				border-radius: 10px;
				width: calc(100% - 152rpx);
				padding: 32rpx;
				margin: 40rpx 44rpx 0rpx 44rpx;
				
				.code-hint{
					color: #FF621F;
					font-weight: bold;
					font-size: 32rpx;
					text-align: center;
				}
				
				.code-small{
					width: 242rpx;
					height: 242rpx;
					margin-top: 32rpx;
				}
				
			}
		}
	}
	
	.update-info-window{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 200;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.update-info-inner-window{
			display: flex;
			flex-direction: column;
			width: calc(100% - 236rpx);
			padding: 0 44rpx;
			position: relative;
			background-color: white;
			align-items: center;
			border-radius: 30rpx;
			
			.update-info-shadow-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.failed-ic{
				width: 108rpx;
				height: 108rpx;
				margin-top: 50rpx;
			}
			
			.hint-content{
				color: #666666;
				font-size: 28rpx;
				margin-left: 70rpx;
				margin-right: 70rpx;
				text-align: center;
				margin-top: 10rpx;
				margin-bottom: 40rpx;
			}
			
			.content-str{
				text-align: center;
				margin-left: 36rpx;
				margin-right: 28rpx;
				margin-top: 30rpx;
				margin-bottom: 40rpx;
				color: #FF621F;
				font-size: 28rpx;
			}
			
			.cancel-btn{
				width: 246rpx;
				height: 88rpx;
				background: #F5F5F5;
				border: 2rpx solid #E0E0E0;
				border-radius: 10rpx;
				text-align: center;
				line-height: 88rpx;
				margin-right: 15rpx;
				color: #333333;
				font-size: 28rpx;
			}
			
			.ok-btn{
				width: 246rpx;
				height: 88rpx;
				background: #FFD100;
				border-radius: 10rpx;
				text-align: center;
				line-height: 88rpx;
				margin-left: 15rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: 600;
			}
			
			.confirm{
				width: 100%;
				height: 88rpx;
				background: #FFD100;
				border-radius: 10rpx;
				color: #333333;
				font-size: 36rpx;
				font-weight: 500;
				text-align: center;
				line-height: 88rpx;
				margin-bottom: 23rpx;
			}
			
			.rule-hint-container{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: calc(100% - 44rpx);
				padding: 22rpx;
				background:  #F5F5F5;
				border-radius: 10rpx;
				margin-bottom: 44rpx;
			}
			
		}
	}
	
	.add-group-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 108rpx);
		margin: 20rpx 30rpx 30rpx 30rpx;
		padding: 30rpx 24rpx;
		background: white;
		border-radius: 16rpx;
		
		.add-btn{
			color: #333333;
			font-size: 28rpx;
			font-weight: 600;
			padding: 6rpx 26rpx;
			background: #FFD100;
			border-radius: 6rpx;
			margin-left: 20rpx;
		}
		
		.logo-ic{
			width: 130rpx;
			height: 130rpx;
			margin-right: 20rpx;
		}
	}
	
	.bottom-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 54rpx);
		height: 120rpx;
		background: white;
		position: fixed;
		bottom: 0;
		z-index: 50;
		padding-left: 24rpx;
		padding-right: 30rpx;
		
		.left-btn-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0rpx 15rpx;
			flex-shrink: 0;
			
			.left-btn{
				width: 38rpx;
				height: 38rpx;
				margin-bottom: 8rpx;
			}
		}
		
		.active-box{
			display: flex;
			flex-direction: row;
			width: 518rpx;
			
			.active-info{
				display: flex;
				flex-direction: column;
				width: 338rpx;
				height: 88rpx;
				background: #212127;
				border-top-left-radius: 50rpx;
				border-bottom-left-radius: 50rpx;
				align-items: center;
				justify-content: center;
			}
			
			.active-btn{
				width: 180rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #FFD100;
				color: #333333;
				font-weight: 600;
				font-size: 32rpx;
				border-top-right-radius: 50rpx;
				border-bottom-right-radius: 50rpx;
			}
			
			.full-active-btn{
				width: 518rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #FFD100;
				color: #333333;
				font-weight: 600;
				font-size: 32rpx;
				border-radius: 50rpx;
			}
		}
		
		.not-start-box{
			width: 496rpx;
			height: 88rpx;
			background: linear-gradient(270deg, #FF4646 0%, #FF9E68 100%);
			text-align: center;
			line-height: 88rpx;
			border-radius: 50rpx;
			font-size: 32rpx;
			color: white;
			font-weight: 400;
		}
		
	}
	
	.to-shop-window{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 200;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.to-shop-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: calc(100% - 148rpx);
			margin-left: 74rpx;
			margin-right: 74rpx;
			padding-top: 44rpx;
			background: white;
			border-radius: 30rpx;
			position: relative;
			
			.to-shop-shadow-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.shop-code-img{
				width: 380rpx;
				height: 380rpx;
				margin-top: 44rpx;
				margin-bottom: 32rpx;
			}
			
			.line-divider{
				width: 333rpx;
				height: 9rpx;
				background: linear-gradient(90deg, #FFC01F 0%, rgba(255, 192, 31, 0) 100%);
				position: absolute;
				top: 28rpx;
			}
			
		}
		
	}
	
	button::after {
		border: none;//去除边框
	}
	
	
	.read-hint-window{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 200;
		background: rgba(0, 0, 0, 0.5);
		
		.read-hint-box{
			display: flex;
			flex-direction: column;
			position: relative;
			width: calc(100% - 148rpx);
			border-radius: 30rpx;
			background: white;
			align-items: center;
			
			.hint-text{
				width: calc(100% - 88rpx);
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #333333;
				line-height: 39rpx;
				text-align: center;
			}
			
			.top-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.read-btn{
				width: calc(100% - 88rpx);
				height: 88rpx;
				background: #FFD100;
				border-radius: 10rpx;
				margin-top: 40rpx;
				margin-bottom: 30rpx;
				text-align: center;
				line-height: 88rpx;
				color: #333333;
				font-size: 32rpx;
				font-weight: 600;
			}
			
			.check-icon{
				width: 26rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
			
			
		}
		
		
	}
	
	
</style>
